<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Excellent browser game site, fun browser game site, free browser game site">
    <title>Example</title>
    <link rel="shortcut icon" href="./favicon.png" type="image/x-icon">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    html,
    body {
        height: 100%;
    }

    .play_game {
        /* height: 100%; */
        height: 100vh;
        /* height: calc(100%-50px); */
        width: 100%;
    }

    .play_game>iframe {
        display: block;
        min-width: 100%;
        height: calc(100vh);
        border: 0;
        overflow: hidden;
        z-index: 999;
    }

    .back {
        width: 50px;
        position: fixed;
        top: 40px;
        left: 0px;
        opacity: 0.7;
        cursor: pointer;
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: #000;
        z-index: 99999999;
        overflow-y: hidden;
    }



    .poster {
        text-align: center;
        /* margin-top: 400px; */
        height: 6.67rem;
        line-height: 6.67rem;
        max-height: 880px;
        box-sizing: border-box;
        padding-top: 0.5rem;
        position: relative;

    }

    .poster>div {
        margin: 0 auto;
    }

    .poster>div>div {
        margin: 0 auto;
    }


    .poster>div>div>iframe {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        /* width: 100%;
      margin: 0 auto; */
        z-index: 10000;
        /* background-color: #fff; */
    }

    .shut {
        position: absolute;
        padding: 0.2rem;
        width: 1rem;
        background-color: gray;
        text-align: center;
        border-radius: .1rem;
        font-weight: 900;
        right: 1.2rem;
        bottom: 1rem;
        font-size: 16px;
    }

    @media (min-width:767px) {
        .poster {
            text-align: center;
            max-height: 880px;
            position: relative;
        }

        .shut {
            position: absolute;
            padding: 20px;
            width: 150px;
            background-color: gray;
            text-align: center;
            border-radius: .1rem;
            font-weight: 900;
            /* right: 1.2rem; */
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
        }
    }

    .time {
        position: absolute;
        line-height: 1rem;
        text-align: center;
        right: 0.3rem;
        border-radius: .1rem;
        color: #aaa;
        bottom: 0.1rem;
    }

    .posterBanner {
        width: 100%;
        text-align: center;
        margin-bottom: 0;
    }

    .posterBanner>div {
        display: flex;
        justify-content: center;
        position: relative;
        bottom: 0%;
        width: 100%;
        margin: 0 auto;
    }

    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div id="App" v-cloak>
        <div class="play_game">
            <iframe class="game" src="./utils/index.html" frameborder="0" scrolling="no" allowfullscreen></iframe>
            <div class="posterBanner" ref='topAd' v-html='poster4'></div>
        </div>

        <img src="./imgs/Home.png" class="back" @click="handleBackHome">
    </div>
</body>
<script src="./main.js"></script>
<script src="./js/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#App",
        data: {
            gameFileName: "gulaodekuangshi",
            gameChannelId: 0,

            mask: true,
            show: true,
            poster: "",
            poster2: "",
            poster3: "",
            poster4: "",
            poster5: "",
            poster6: "",
            count: "",
            totalTime: 5,
        },
        methods: {
            getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) { return pair[1]; }
                }
                return (false);
            },
            handleBackHome() {
                window.history.back()
            },
            countDown() {
                let clock = setInterval(() => {
                    this.totalTime--;
                    this.count = this.totalTime + "s Can be closed";
                    if (this.totalTime <= 0) {
                        clearTimeout(clock);
                        this.count = "Play";
                        setTimeout(() => {
                            this.mask = false
                        }, 2000)
                    }
                }, 1000);
            },
            close() {
                if (this.totalTime == 0) {
                    this.mask = false;
                }
            },
            getPoster() {
                axios({
                    method: 'post',
                    url: 'https://www.migame.vip/gamefront/gameAd/getHomeAdListVo',
                    data: {
                        gameChannelId: this.gameChannelId,
                        gameSceneId: 3
                    }
                }).then(res => {
                    for (let index = 0; index < res.data.data.length; index++) {
                        switch (res.data.data[index].adPositionId) {
                            case 3:
                                const str = res.data.data[index].gcJs
                                if (str.indexOf("ins") !== -1) {
                                    this.poster = str.match(/<ins.*?\/ins>/g)[0];
                                    this.poster2 = str.match(/<script.*?\/script>/g)[0].split('>')[
                                        1].split('<')[0];
                                    setTimeout(() => {
                                        var ele = document.createElement('script')
                                        ele.innerHTML = this.poster2
                                        this.$refs.poster.append(ele)
                                        console.log(ele)
                                    }, 16)
                                } else {
                                    this.poster = str.slice(str.indexOf('<div'), str.indexOf(
                                        ";'>")) + "'>" + str.slice(str.indexOf('</div'))
                                    this.poster2 = str.split("<script>")[1].split("</s")[0];
                                    this.poster3 = str.split("<script>")[2].split("</s")[0];
                                    setTimeout(() => {
                                        var ele = document.createElement("script");
                                        ele.innerHTML = this.poster2;
                                        this.$refs.poster.append(ele);
                                        var ele2 = document.createElement("script");
                                        ele2.innerHTML = this.poster3;
                                        this.$refs.poster.append(ele2);
                                        console.log(ele)
                                    }, 16);
                                }
                                break;

                            case 2:
                                const str2 = res.data.data[index].gcJs
                                if (str2.indexOf("ins") !== -1) {
                                    this.poster4 = str2.match(/<ins.*?\/ins>/g)[0];
                                    this.poster5 = str2.match(/<script.*?\/script>/g)[0].split('>')[
                                        1].split('<')[0];
                                    setTimeout(() => {
                                        var ele = document.createElement('script')
                                        ele.innerHTML = this.poster5
                                        this.$refs.topAd.append(ele)
                                        console.log(ele)
                                    }, 16)
                                } else {
                                    this.poster4 = str2.slice(str2.indexOf('<div'), str2.indexOf(
                                        ";'>")) + "'>" + str2.slice(str2.indexOf('</div'))
                                    this.poster5 = str2.split("<script>")[1].split("</s")[0];
                                    this.poster6 = str2.split("<script>")[2].split("</s")[0];
                                    setTimeout(() => {
                                        var ele = document.createElement("script");
                                        ele.innerHTML = this.poster5;
                                        this.$refs.topAd.append(ele);
                                        var ele2 = document.createElement("script");
                                        ele2.innerHTML = this.poster6;
                                        this.$refs.topAd.append(ele2);
                                        console.log(ele)
                                    }, 16);
                                }
                                break;

                            default:
                                break;
                        }
                    }
                })
            },
        },
        mounted() {
            this.getQueryVariable("gameFileName") !== false ? this.gameFileName = this.getQueryVariable("gameFileName") : ""
            //   this.getPoster()
        }
    })
</script>

</html>